<template>
  <div class="main">
    我是一个异步子组件
    <p>{{ num }}</p>
  </div>
</template>

<script>
import { ref, onUnmounted } from 'vue';
//情况1 setUp 不添加async 直接返回一个promise 实例
//情况2 setUp 添加async  需promise 执行完 执行resolve 抛出对象
//切记 这两种情况都需要  父组件定义 异步引入子组件+Suspense内置组件
export default {
  //情况1
  setup() {
    let num = ref(0);
    let timer = null;
    let p = new Promise((resolve, reject) => {
      try {
        timer = setTimeout(() => {
          num.value++;
          resolve({ num }); //传出的是对象
        }, 2000);
      } catch (error) {
        reject(error);
      }
    });

    onUnmounted(() => {
      clearTimeout(timer);
    });
    console.log('p', p); //p promise
    return p;
  }

  //情况2
  // async setup() {
  //   let num = ref(0);
  //   let timer = null;
  //   let p = new Promise((resolve, reject) => {
  //     try {
  //       timer = setTimeout(() => {
  //         num.value++;
  //         resolve({ num }); //传出的是对象
  //       }, 2000);
  //     } catch (error) {
  //       reject(error);
  //     }
  //   });

  //   onUnmounted(() => {
  //     clearTimeout(timer);
  //   });
  //   console.log('p', p); //p promise
  //   let result = await p; //返回对象
  //   console.log('result', result);
  //   return result;
  // },
};
</script>

<style lang="scss" scoped>
.main {
  height: 400px;
  background-color: pink;
}
</style>
